<template>
	<div>
		<mt-swipe :auto="4000">
			<!--在组件中用v-for循环的话，需要使用key-->
			<!--谁使用轮播图组件，谁传入lunbotuList-->
			<!--此时应该是父组件给子组件传值-->
			<mt-swipe-item v-for="item in lunbotuList" :key="item.url">
			  <img :src="item.img" alt="" :class='{"full":isfull}'/>	
			</mt-swipe-item>
			
			<!--<mt-swipe-item>1</mt-swipe-item>
			<mt-swipe-item>2</mt-swipe-item>
			<mt-swipe-item>3</mt-swipe-item>-->
		</mt-swipe>	
	</div>
	<!--分析：为什么商品评论中的轮播图那么丑
		首页的轮播图图片，它的宽高都使用了100%的宽度
		在商品详情页面中，轮播图的宽度应该自适应，  高大于宽，此时不好看
		商品中的页面，希望高度是100%，但是宽度是自适应 
		经过分析，得到问题的原因，首页中的轮播图和详情页面的轮播图分歧点是宽度到底是100%还是自适应
		我们可以定义一个属性，让使用轮播图调用者，手动指定的是否为宽度100%
	-->
</template>

<script>
	export default {
		props:['lunbotuList','isfull']
	}
</script>

<style lang="scss" scoped>
.mint-swipe{
   	height: 200px;

  .mint-swipe-item{
  	text-align: center;
   	 /*&:nth-child(1){
   	 	background-color: red;
   	 }
   	 &:nth-child(2){
   	 	background-color: pink;
   	 }
   	 &:nth-child(3){
   	 	background-color: greenyellow;
   	 }*/
   	 
   	  img {
   	  	
   	  	height:100%;
   	  }
   	
   }
}
.full {
	width:100%;
}
</style>